﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>CrappyClicker v.π²</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="jquery.js" ></script>
    <script src="events.js" ></script>
    <script src="spells.js" ></script>
    <script src="adventure.js" defer></script>
    <script src="equipment_data.js" defer></script>
    <script src="location_data.js" defer></script>

    <script src="//cdn.rawgit.com/erosson/swarm-numberformat/v0.1.0/dist/swarm-numberformat.min.js"></script>
    <script src="app.js" ></script>
</head>
<body>
    <div style="font-size: small; position:absolute; top: 0;">
        v1.16.1 | 
        <a href="changelog.txt" target="_blank" style="text-decoration: none; color: lightgray;">Changelog</a> |
        <a href="http://crappy-incremental.wikia.com/wiki/Crappy_Incremental_Wiki" target="_blank" style="text-decoration: none; color: lightgray;">Wiki</a> |
        <a href="https://discord.gg/78AGWku" target="_blank" style="text-decoration: none; color: lightgray;">Discord</a> |
        <span onclick="save_to_clip()">Export</span> |
        <span onclick="load_from_clip()">Import</span>
        <span style="position: absolute; left: 45em; top: -.3em; white-space: nowrap">Buy Amount: <input id="buy_amount" style="font-size: 10px; background-color: #333; color: lightgray; border: none; width: 4em;" type="number" min="0"/></span>
        <span id="upgrade_count" class="tooltip" style="position: absolute; left: 54.6em; top: -.2em; white-space: nowrap;"><span id="num_upgrades"></span><span id="purchased_upgrades" class="tooltiptext">Purchased Upgrades:</span></span>
    </div>
    <div id="resource_bar">
        <div id="time" class="hidden" style="margin-bottom: .3em;">
            <span style="color: blue; text-shadow: coral 1px 0px 15px; vertical-align: middle;">Time: 0</span>
            <span id="time_toggle" class="res_gen" onclick="toggle_time()" style="margin: .1em; padding: .1em; padding-top: 0; border: 1px solid white; border-radius: 3px;">
                Speed Time
            </span>
            <br />
        </div>
        <div id="refined_mana" class="hidden" style="margin-bottom: .3em;">
            <span style="color: red; text-shadow: deepskyblue 1px 0px 15px; vertical-align: middle;">Refined mana: 0</span>
            <span class="res_gen" onclick="if(resources['refined_mana'].amount < 250) {alert('You need 250 refined mana.');return;} else if (!$('#events').hasClass('hidden')) { alert('There\'s already an event going on!'); return; } if (confirm('Try to force an event to occur for 250 refined mana?')) { resources['refined_mana'].amount -= 250; handle_event(false); }" style="margin: .1em; padding: .1em; padding-top: 0; border: 1px solid white; border-radius: 3px;">
                Force Event
            </span>
            <br />
        </div>
        <div id="fuel" class="hidden" style="margin-bottom: .3em;">
            <span style="color: greenyellow; text-shadow: yellow 1px 0px 10px; vertical-align: middle;">Refined mana: 0</span>
            <span class="res_gen" onclick="if (resources['fuel'].amount < 10) { alert('You need more fuel.'); } else { start_adventure(); }" style="margin: .1em; padding: .1em; padding-top: 0; border: 1px solid white; border-radius: 3px;">
                Adventure
            </span>
            <br />
        </div>
        <span id="mana" class="hidden" style="color: mediumpurple"><span></span><br /></span>
        <span id="energy" class="hidden" style="color: gold"><span></span><br /></span>
        <span id="research" class="hidden" style="color: deepskyblue;"><span></span><br /></span>
        <span id="manager" class="hidden" style="color: tan;"><span></span><br /></span>


        <span id="money" class="hidden"><span>Money: 0</span><span id="money_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="stone" class="hidden"><span>Stone: 0<br /></span><span id="stone_per_sec" class="res_gen">Making 0 per second.</span><br /></span>
        <span id="wood" class="hidden"><span>Wood: 0<br /></span><span id="wood_per_sec" class="res_gen">Making 0 per second.</span><br /></span>
        <span id="iron_ore" class="hidden"><span>Iron Ore: 0<br /></span><span id="iron_ore_per_sec" class="res_gen">Making 0 per second.</span><br /></span>
        <span id="coal" class="hidden"><span>Coal: 0<br /></span><span id="coal_per_sec" class="res_gen">Making 0 per second.</span><br /></span>
        <span id="iron" class="hidden"><span>Iron: 0<br /></span><span id="iron_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="gold" class="hidden"><span>Gold: 0<br /></span><span id="gold_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="diamond" class="hidden"><span>Diamond: 0<br /></span><span id="diamond_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="jewelry" class="hidden"><span>Jewelry: 0<br /></span><span id="jewelry_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="oil" class="hidden"><span>Oil: 0<br /></span><span id="oil_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="paper" class="hidden"><span>纸: 0<br /></span><span id="paper_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="ink" class="hidden"><span>Ink: 0<br /></span><span id="ink_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="book" class="hidden"><span>Book: 0<br /></span><span id="book_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="sand" class="hidden"><span>Sand: 0<br /></span><span id="sand_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="glass" class="hidden"><span>Glass: 0<br /></span><span id="glass_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="water" class="hidden"><span>Water: 0<br /></span><span id="water_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="hydrogen" class="hidden"><span>Hydrogen: 0<br /></span><span id="hydrogen_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="steel_beam" class="hidden"><span>Steel beam: 0<br /></span><span id="steel_beam_per_sec" class="res_gen">Making 1 per second.</span><br /></span>
        <span id="uranium" class="hidden"><span>Uranium: 0<br /></span><span id="uranium_per_sec" class="res_gen">Making 1 per second.</span><br /></span>

    </div>
    <div id="buildings">
        <div id="spells" class="hidden">
            <div style="position: relative">
                <span id="building_s_manastone" class="building tooltip" style="color: mediumpurple;"><span class="building_name">Mana Stone</span><span class="building_amount">0</span><span class="tooltiptext">Each stone generates 1 mana.</span></span>
            </div>
            <div style="position: relative">
                <span id="building_s_mana_refinery" class="building tooltip" style="color: #33f;" onclick="s_refinery(parseInt($('#buy_amount').val()))"><span class="building_name">Mana Refinery</span><span class="building_amount">1</span><span class="tooltiptext">Refine your mana into a crystalline form.</span></span>
            </div>
            <div style="position: relative">
                <span id="building_s_goldboost" class="building tooltip" style="color: gold;"><span class="building_name">Greed</span><span class="building_amount"></span><span class="tooltiptext">Uses 2 mana, but doubles net money and gold gains.</span></span>
                <span id="toggle_s_goldboost" class="building_state_off" onclick="toggle_building_state('s_goldboost')">Off</span>
            </div>
            <div style="position: relative" class="hidden">
                <span id="building_s_energyboost" class="building tooltip" style="color: plum;">
                    <span class="building_name">Thaumaturgic Converter</span>
                    <span class="building_amount">1</span>
                    <span style="float: right; color: green;" onclick="purchase_building('s_energyboost');">&nbsp;+&nbsp;</span>
                    <span style="float: right; color: red;" onclick="destroy_building('s_energyboost');">&nbsp;-&nbsp;</span>
                    <span class="tooltiptext">Converts mana to energy. <br />Every energy takes 3 mana. </span>
                </span>
                <span id="toggle_s_energyboost" class="building_state_off" onclick="toggle_building_state('s_energyboost')">Off</span>
            </div>
            <div style="position: relative">
                <span id="building_s_trade" class="building tooltip" style="color: moccasin;"><span class="building_name">Market Portal</span><span class="building_amount">6</span><span class="tooltiptext">Uses 6 mana to open a portal to the interdimensional market. What could be there?</span></span>
                <span id="toggle_s_trade" class="building_state_off" onclick="toggle_building_state('s_trade')">Off</span>
            </div>
            <div style="position: relative">
                <span id="building_s_startboost" class="building tooltip" style="color: darkgreen;"><span class="building_name">Boost</span><span class="building_amount">25</span><span class="tooltiptext">Uses 25 mana to generate resources.</span></span>
                <span id="toggle_s_startboost" class="building_state_off" onclick="toggle_building_state('s_startboost')">Off</span>
            </div>
            <div style="position: relative">
                <span id="building_s_time_magic" class="building tooltip" style="color: cyan;"><span class="building_name">Time Rewind</span><span class="building_amount">25</span><span class="tooltiptext">Uses 30 mana to make time pass twice as fast.</span></span>
                <span id="toggle_s_time_magic" class="building_state_off" onclick="toggle_building_state('s_time_magic')">Off</span>
            </div>
            <div style="position: relative">
                <span id="building_s_workshop" class="building" style="color: dimgrey;">
                    <span class="building_name">Manufacturing</span>
                    <span class="tooltip">
                        (?)
                        <span class="tooltiptext">
                            Can build a variety of different items. <hr />
                            <span id="workshop_prod">???</span>
                        </span>
                    </span>
                    <select id="workshop_select" onchange="s_workshop(this.value);">
                        <option value="iron">Extract iron</option>
                        <option value="wood">Grow wood</option>
                        <option value="glass">Smelt glass</option>
                        <option value="steel">Forge Steel</option>
                    </select>
                    <span class="building_amount">50</span>
                </span>
                <span id="toggle_s_workshop" class="building_state_off" onclick="toggle_building_state('s_workshop')">Off</span>
            </div>
            <div style="position: relative" class="">
                <div id="building_s_workshop_2" class="building" style="color: lightslategrey; height: 2.5em;" onclick="$('#workshop_option_bar').toggleClass('hidden');">
                    <span class="building_name">Workshop</span>
                    <span class="building_amount">200</span>
                    <span id="workshop_progress_bar" class="clickable" style="position: absolute; left: 0; top: 1.7em; width: 17.5em; height: .5em; background-color: green;"></span>
                    <div id="workshop_option_bar" class="hidden" onclick="event.stopPropagation()" style="position: absolute; top: 2.5em; left: 0; background: #222; z-index: 1;">
                        <div class="clickable">
                            <table>
                                <tr>
                                    <td class="clickable" onclick="s_workshop_set('glass')">(50) Glass</td>
                                    <td>100 Sand</td>
                                </tr>
                                <tr>
                                    <td class="clickable" onclick="s_workshop_set('steel_beam')">(25) Steel Beam</td>
                                    <td>500 Iron</td>
                                    <td>500 Coal</td>
                                </tr>
                                <tr>
                                    <td class="clickable" onclick="s_workshop_set('ink')">(50) Ink</td>
                                    <td>50 Oil</td>
                                </tr>
                                <tr>
                                    <td class="clickable" onclick="s_workshop_set('money')">(1500) Money</td>
                                    <td>10 Gold</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <span id="toggle_s_workshop_2" class="building_state_off" onclick="toggle_building_state('s_workshop_2')">Off</span>
            </div>
            <hr />
        </div>

        <!-- Base production -->
        <div style="position: relative">
            <span onclick="destroy_building('bank')" class="building_remove">X</span>
            <span id="building_bank" class="building tooltip" onclick="purchase_building('bank');">
                <span class="building_name">Bank</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 1 money per second.<br /> Costs 10 money.</span>
            </span>
            <span id="toggle_bank" class="building_state_on" onclick="toggle_building_state('bank')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('oil_well')" class="building_remove">X</span>
            <span id="building_oil_well" class="building tooltip" onclick="purchase_building('oil_well');">
                <span class="building_name">Oil Well</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 1 oil per second.<br /> Costs 1000 money, 100 stone, 500 iron.</span>
            </span>
            <span id="toggle_oil_well" class="building_state_on" onclick="toggle_building_state('oil_well')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('library')" class="building_remove">X</span>
            <span id="building_library" class="building tooltip" onclick="purchase_building('library');">
                <span class="building_name">Library</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 1 research per second.<br /> Costs 500 money, 500 wood, 50 iron, 10 book.</span>
            </span>
            <span id="toggle_library" class="building_state_on" onclick="toggle_building_state('library')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('water_purifier')" class="building_remove">X</span>
            <span id="building_water_purifier" class="building tooltip" onclick="purchase_building('water_purifier');">
                <span class="building_name">Water Purifier</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 1 water per second.<br /> Costs 500 money, 500 stone, 500 sand, 100 glass.</span>
            </span>
            <span id="toggle_water_purifier" class="building_state_on" onclick="toggle_building_state('water_purifier')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('skyscraper')" class="building_remove">X</span>
            <span id="building_skyscraper" class="building tooltip" onclick="purchase_building('skyscraper');">
                <span class="building_name">Skyscraper</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 1 manager.<br /> Should be auto-filled here </span>
            </span>
            <span id="toggle_skyscraper" class="building_state_on" onclick="toggle_building_state('skyscraper')">On</span>
        </div>
        <br />

        <!-- Energy Generators -->
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('oil_engine')" class="building_remove">X</span>
            <span id="building_oil_engine" class="building tooltip" onclick="purchase_building('oil_engine');">
                <span class="building_name">Oil-burning Engine</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 oil per second, 1 energy per second.<br /> Costs 500 money, 200 iron.</span>
            </span>
            <span id="toggle_oil_engine" class="building_state_on" onclick="toggle_building_state('oil_engine')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('solar_panel')" class="building_remove">X</span>
            <span id="building_solar_panel" class="building tooltip" onclick="purchase_building('solar_panel');">
                <span class="building_name">Solar Panel</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()"></span>
            </span>
            <span id="toggle_solar_panel" class="building_state_on" onclick="toggle_building_state('solar_panel')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('hydrogen_burner')" class="building_remove">X</span>
            <span id="building_hydrogen_burner" class="building tooltip" onclick="purchase_building('hydrogen_burner');">
                <span class="building_name">Hydrogen Engine</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -20 hydrogen per second, 10 energy per second, 7 water per second.<br /> Costs 2500 money, 500 iron.</span>
            </span>
            <span id="toggle_hydrogen_burner" class="building_state_on" onclick="toggle_building_state('hydrogen_burner')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('reactor')" class="building_remove">X</span>
            <span id="building_reactor" class="building tooltip" onclick="purchase_building('reactor');">
                <span class="building_name">Nuclear Reactor</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()"></span>
            </span>
            <span id="toggle_reactor" class="building_state_on" onclick="toggle_building_state('reactor')">On</span>
        </div>

        <br />

        <!-- Converters (uses a resource to run)-->
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('mine')" class="building_remove">X</span>
            <span id="building_mine" class="building tooltip" onclick="purchase_building('mine');">
                <span class="building_name">Mine</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 money per second, 1 Stone per second.<br /> Costs 20 money.</span>
            </span>
            <span id="toggle_mine" class="building_state_on" onclick="toggle_building_state('mine')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('logging')" class="building_remove">X</span>
            <span id="building_logging" class="building tooltip" onclick="purchase_building('logging');">
                <span class="building_name">Logging Camp</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 money per second, 1 Wood per second.<br /> Costs 20 money.</span>
            </span>
            <span id="toggle_logging" class="building_state_on" onclick="toggle_building_state('logging')">On</span>
        </div>
        <div style="position: relative" class="hidden" >
            <span onclick="destroy_building('furnace')" class="building_remove">X</span>
            <span id="building_furnace" class="building tooltip" onclick="purchase_building('furnace');">
                <span class="building_name">Blast Furnace</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">
                    Generates 1 iron per second, 1 Coal per second, -5 Wood per second, -3 Iron ore per second.<br />
                    Costs 15 money, 30 stone.
                </span>
            </span>
            <span id="toggle_furnace" class="building_state_on" onclick="toggle_building_state('furnace')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('gold_finder')" class="building_remove">X</span>
            <span id="building_gold_finder" class="building tooltip" onclick="purchase_building('gold_finder');">
                <span class="building_name">Gold Sifter</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 0.1 gold per second, -20 stone per second.<br />Costs 100 money, 500 stone, 200 wood.</span>
            </span>
            <span id="toggle_gold_finder" class="building_state_on" onclick="toggle_building_state('gold_finder')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('compressor')" class="building_remove">X</span>
            <span id="building_compressor" class="building tooltip" onclick="purchase_building('compressor');">
                <span class="building_name">Diamond Compressor</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates 0.1 diamond per second, -10 coal per second. <br />Costs 100 money, 500 stone, 200 iron.</span>
            </span>
            <span id="toggle_compressor" class="building_state_on" onclick="toggle_building_state('compressor')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('jeweler')" class="building_remove">X</span>
            <span id="building_jeweler" class="building tooltip" onclick="purchase_building('jeweler');">
                <span class="building_name">Jeweler</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -3 gold per second, -1 diamond per second, 1 jewelry per second.<br /> Costs 200 money, 750 stone</span>
            </span>
            <span id="toggle_jeweler" class="building_state_on" onclick="toggle_building_state('jeweler')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('glass_jeweler')" class="building_remove">X</span>
            <span id="building_glass_jeweler" class="building tooltip" onclick="purchase_building('glass_jeweler');">
                <span class="building_name">Glassblower</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">  TOOLTIP  </span>
            </span>
            <span id="toggle_glass_jeweler" class="building_state_on" onclick="toggle_building_state('glass_jeweler')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('jewelry_store')" class="building_remove">X</span>
            <span id="building_jewelry_store" class="building tooltip" onclick="purchase_building('jewelry_store');">
                <span class="building_name">Jewelry Store</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 jewelry per second, 400 money per second.<br /> Costs 5000 money, 500 stone, 500 wood.</span>
            </span>
            <span id="toggle_jewelry_store" class="building_state_on" onclick="toggle_building_state('jewelry_store')">On</span>
        </div>
        <br />

        <!-- Machines (use energy) -->
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('paper_mill')" class="building_remove">X</span>
            <span id="building_paper_mill" class="building tooltip" onclick="purchase_building('paper_mill');">
                <span class="building_name">Paper Mill</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 energy per second, -3 wood per second, 1 paper per second.<br /> Costs 200 money, 200 iron, 100 oil.</span>
            </span>
            <span id="toggle_paper_mill" class="building_state_on" onclick="toggle_building_state('paper_mill')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('ink_refinery')" class="building_remove">X</span>
            <span id="building_ink_refinery" class="building tooltip" onclick="purchase_building('ink_refinery');">
                <span class="building_name">Ink Refinery</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 energy per second, -3 oil per second, 1 ink per second.<br /> Costs 200 money, 200 iron, 100 oil.</span>
            </span>
            <span id="toggle_ink_refinery" class="building_state_on" onclick="toggle_building_state('ink_refinery')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('money_printer')" class="building_remove">X</span>
            <span id="building_money_printer" class="building tooltip" onclick="purchase_building('money_printer');">
                <span class="building_name">Money Printer</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 energy per second, -2 paper per second, -1 ink per second, 30 money per second.<br /> Costs 500 money, 500 iron, 200 oil.</span>
            </span>
            <span id="toggle_money_printer" class="building_state_on" onclick="toggle_building_state('money_printer')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('book_printer')" class="building_remove">X</span>
            <span id="building_book_printer" class="building tooltip" onclick="purchase_building('book_printer');">
                <span class="building_name">Printing Press</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 energy per second, -2 paper per second, -1 ink per second, 0.1 book per second.<br /> Costs 500 money, 500 iron, 200 oil.</span>
            </span>
            <span id="toggle_book_printer" class="building_state_on" onclick="toggle_building_state('book_printer')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('hydrogen_gen')" class="building_remove">X</span>
            <span id="building_hydrogen_gen" class="building tooltip" onclick="purchase_building('hydrogen_gen');">
                <span class="building_name">Electrolysis Machine</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -2 energy per second, -1 water per second, 2 hydrogen per second.<br /> Costs 2500 money, 500 glass.</span>
            </span>
            <span id="toggle_hydrogen_gen" class="building_state_on" onclick="toggle_building_state('hydrogen_gen')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('fuel_maker')" class="building_remove">X</span>
            <span id="building_fuel_maker" class="building tooltip" onclick="purchase_building('fuel_maker');">
                <span class="building_name">Fuel Synthesizer</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()"></span>
            </span>
            <span id="toggle_fuel_maker" class="building_state_on" onclick="toggle_building_state('fuel_maker')">On</span>
        </div>

        <br />

        <!-- Managed Buildings -->
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('big_bank')" class="building_remove">X</span>
            <span id="building_big_bank" class="building tooltip" onclick="purchase_building('big_bank');">
                <span class="building_name">Investment Company</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 manager, 50 money per second.<br />Costs 5000 money, 5000 stone, 100 glass.<hr><i style='font-size: small'>Serious business</i></span>
            </span>
            <span id="toggle_big_bank" class="building_state_on" onclick="toggle_building_state('big_bank')">On</span>
        </div>
        <div style="position: relative" class="hidden">
            <span onclick="destroy_building('big_mine')" class="building_remove">X</span>
            <span id="building_big_mine" class="building tooltip" onclick="purchase_building('big_mine');">
                <span class="building_name">Strip Mine</span>
                <span class="building_amount">0</span>
                <span class="tooltiptext" onclick="event.stopPropagation()">Generates -1 manager, -150 money per second, 50 stone per second, 10 iron ore per second, 3 coal per second, 2 iron per second, 0.5 gold per second, 0.1 diamond per second, 20 sand per second.<br />Costs 10000 money, 100 steel beam, 10000 wood.</span>
            </span>
            <span id="toggle_big_mine" class="building_state_on" onclick="toggle_building_state('big_mine')">On</span>
        </div>
    </div>
    <div id="upgrades">
        <span id="reset" class="tooltip" onclick="if(confirm('Are you sure? This resets EVERYTHING!') && prompt('If you\'re absolutely sure, enter \'reset\'.') == 'reset') { localStorage.clear(); location.reload();}"><span>Reset</span><span class="tooltiptext">Resets ALL progress. There is NO bonus for this!</span></span>
        <span id="save" onclick="save();">Save</span>
        <span id="prestige" onclick="prestige();" class="tooltip">Prestige<span class="tooltiptext">Mana gains from prestige are based on how many resources you have and what kinds they are. <br /> Mana provides many different unique buildings!</span></span>
        <span id="all_on" onclick="Object.keys(buildings).forEach(function (build) { if (!buildings[build].on && SPELL_BUILDINGS.indexOf(build) == -1) { toggle_building_state(build);}});">全部打开</span>
        <span id="all_off" onclick="Object.keys(buildings).forEach(function (build) { if (buildings[build].on && SPELL_BUILDINGS.indexOf(build) == -1) { toggle_building_state(build);}});">全部关闭</span>
        <span id="save_text">已保存!</span>
        <div id="log">
        </div>
        

        <ul>
        </ul>



    </div>
    <div id="events" class="hidden">
        <div class="window_topbar">
            <span id="events_topbar">Something Happened</span>
            <span id="close_events" onclick="$('#events').addClass('hidden'); $('#events_content').html(''); $('#character').addClass('hidden');">X</span>
        </div>
        <div id="events_content"></div>
    </div>
    <div id="character" class="hidden">
        <div class="window_topbar">Your stuff</div>
        <div id="character_content" onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';">
            Your items will go here<br />
            Probably, not sure how it'll work<br />
            Also, this scrolls. Try it out!.<br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            See?<br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            I guess if your browser is large enough you don't need to scroll to get here.<br />
        </div>
    </div>

    <div id="notif" style="position: fixed; top: 4%; left: 15%; height: 5em; width: 70%; z-index: 999; background-color: #222; border: solid lightgray 1px; border-radius: 3px; align-content: center; text-align: center;">
        <div class="window_topbar">
            <span>! Alert !</span>
            <span id="close_notif" onclick="$('#notif').addClass('hidden');" style="position: absolute; z-index: 999; top: 0.3em; right: 0.3em; background-color: red; border: solid orange 1px; padding-left: .5em; padding-right: .5em; border-radius: 3px;">X</span>
        </div>
        <div>
            Crappy Incremental has been renamed! Find the new version <a href="https://fuzzything44.github.io/Incremental/Technomancy/">here</a>!
        </div>
    </div>
</body>
</html>
